<template>
	<view class="modal-box" v-if="isRender">
		<u-transition :show="show" mode="fade" :duration="300">
			<u-modal :show="show" :title="title" :showCancelButton="false" :showConfirmButton="false"
				:closeOnClickOverlay="true" @close="close">
				<view class="content">
					<view class="title">
						{{getStr('uploadVideo')}}
					</view>
					<view class="video-box" @click="chooseVideo">
						<image v-if="!videoType" src="/static/images1/upload1.png" style="width: 34rpx; height: 34rpx;"></image>
						<video v-if="videoType" :src="videoType" style="width: 118rpx; height: 118rpx;"></video>
					</view>
					<view class="title">
						{{getStr('uploadDiningReceipts')}}
					</view>
					<view class="video-box" @click="uploadImg">
						<image v-if="!imageType" src="/static/images1/upload2.png" style="width: 34rpx; height: 34rpx;"></image>
						<image v-if="imageType" :src="imageType" style="width: 118rpx; height: 118rpx;"></image>
					</view>
				</view>
				<view class="btn-box">
					<view @click="close">
						<u-button customStyle="border-radius:12rpx" text="取消"
							color="linear-gradient(90deg, #b5b5b5 0%, #ffd5dd 100%)" @click="close"></u-button>
					</view>
					<view>
						<sysButton :loading="btnLoading" :text="confirmText" :handleChange="confirm"></sysButton>
					</view>
				</view>
				<!-- <u-icon name="close-circle-fill" size="34" color="#ffffff" @click="close"></u-icon> -->
			</u-modal>
		</u-transition>
	</view>
</template>

<script>
	import sysButton from '@/components/sysButton/index.vue'
	import {useMealCards} from '@/common/api/common.js'
	export default {
		components: {
			sysButton
		},
		props: {
			show: {
				type: Boolean,
				defaultValue: false
			},
			title: {
				type: String,
				default: ''
			},
			describe: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			closeText: {
				type: String,
				default: '取消'
			},
		},
		data() {
			return {
				isRender: true,
				videoType:'',
				imageType:'',
				btnLoading:false
			}
		},
		onShow() {
			this.setIsRender()
		},
		methods: {
			close() {
				this.$emit('close');
			},
			async confirm() {
				this.btnLoading = true
				uni.uploadFile({
					url: 'https://ophiapi.adxsst.com/api/v1/center/useMealCards', // 你的上传接口地址
					files:[
						{name:'videoType',uri:this.videoType},
						{name:'imageType',uri:this.imageType}
					],
					header:{
						Authorization: uni.getStorageSync('token')
					},
					formData: {
						telegramId: uni.getStorageSync('telegramId'), // 其他要传的参数可以在这里添加
					},
					success: uploadFileRes => {
						console.log(uploadFileRes);
						const res = JSON.parse(uploadFileRes.data)
						console.log(res)
						// 处理上传成功的结果
						if(res.code == 200){
							uni.$u.toast(this.getStr('uploadSuccess'))
							this.$emit('confirm', true);
							this.close()
						}else{
							uni.$u.toast(res.message)
						}
						
						this.btnLoading = false
					},
					fail: uploadFileError => {
						// 处理上传失败的错误
						this.btnLoading = false
					}
				});
			},
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['album', 'camera'], // 可选择视频来源
					camera: 'back', // 默认使用前置摄像头，可选值有front、back
					maxDuration: 60, // 最大视频录制时长（秒）
					success: (res) => {
						console.log(res)
						// this.uploadVideo(res.tempFilePath);
						console.log(res.tempFilePath)
						this.videoType = res.tempFilePath
						uni.$u.toast(this.getStr('uploadSuccess'))
					},
					fail: (err) => {
						console.log('选择视频失败：', err);
					}
				});
			},
			uploadVideo(videoPath) {
				uni.uploadFile({
					url: 'https://your-upload-api.com', // 服务器上传接口
					filePath: videoPath,
					name: 'file', // 必须填写，后台用来接收文件
					formData: {
						'user': 'test' // 其他要传的参数
					},
					success: (uploadFileRes) => {
						console.log('上传成功：', uploadFileRes);
					},
					fail: (uploadFileErr) => {
						console.log('上传失败：', uploadFileErr);
					}
				});
			},
			uploadImg() {
				uni.chooseImage({
					success: chooseImageRes => {
						console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.imageType = tempFilePaths[0]
						uni.$u.toast(this.getStr('uploadSuccess'))
						
					}
				});
			},
			getStr(key){
				return uni.$t(key)
			},
			setIsRender(){
				this.isRender = false
				setTimeout(() => {
					this.isRender  = true
				}, 50)
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		
	}
</script>

<style lang="scss" scoped>
	.modal-box {
		::v-deep .u-popup__content {
			border-radius: 12rpx !important;
			overflow: inherit !important;
			background-color: #1C1E23;
		}
		
		::v-deep .u-modal__title{
			color: #ffffff;
		}

		::v-deep .u-modal__content {
			display: block !important;
		}

		.content {
			width: 100%;
			display: block;
			padding: 0 0;

			.title {
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				margin-bottom: 24rpx;
			}

			.video-box {
				background: rgba(255, 255, 255, 0.1);
				border-radius: 16rpx;
				border: 1px dashed #FFFFFF80;
				width: 120rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 56rpx;
			}
		}

		::v-deep .u-icon {
			position: absolute;
			bottom: -100rpx;
			left: calc(50% - 17px);
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-between;

		view {
			width: calc(50% - 10rpx);
		}

		::v-deep .u-button {
			height: 88rpx;
		}
	}
</style>